<template>
	<view class="pad-16r bg-white">
		<view class="top-title">请选择健康卡，授权医院建档就医</view>
		<view class="userInfo" v-for="(item,i) in healthCardList">
			<view>
				<view class="hasCard">
					<view class="user">
						<view class="font-size-20 font-weight">
							{{item.name}}
						</view>
						<view class="mar-5-0">
							证件号：{{item.certId.substring(0, 3) + '**********' + item.certId.substring(15)}}
						</view>
					</view>
					<view class="btn-qr">
						<view class="btn default" v-if="item.loginStatus==1">默认</view>
						<view class="btn" v-else @click.stop="selectUser(item,i)">选择此卡</view>
					</view>
					<view class="card">
						<tkiQrcodeVue ref="qrcode" onval :val="item.ehcId" :size="180" :load-make="true"
							:show-loading="false" />
					</view>
					<image class="card-center" src="/static/images/health-card/healthCardCenter.png"></image>
				</view>
			</view>
		</view>
		<view class="add-card" @click="toAddHealthCardPage">
			<view>
				<image class="card" src="/static/images/patient/jiuzhengka.png"></image>
				<view>新增健康卡</view>
			</view>
		</view>
		<Dialog :show.sync="show" title="温馨提示" @confirm="handleSure" @close="show=false">
			<slot>
				<view class="center">
					确定选择此卡？
				</view>
			</slot>
		</Dialog>
	</view>
</template>

<script>
	import Dialog from "../../components/Dialog/Dialog.vue"
	import {
		healthCardList
	} from '../../api/patientCard';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import tkiQrcodeVue from "../../components/QrCode/tki-qrcode.vue";
	export default {
		components: {
			Dialog,
			tkiQrcodeVue
		},
		data() {
			return {
				healthCardList: [],
				show: false,
				patId: '', //患者id
			}
		},
		computed: {
			...mapGetters(['userId', 'userInfo', 'userList']),
		},
		mounted() {

			this.init();
		},
		methods: {
			...mapActions(['changeUser']),
			init() {
				// let vo = {
				// 	idType: this.userInfo.certType,
				// 	idNo: this.userInfo.certId,
				// 	patName: this.userInfo.patName,
				// 	hisAccess: '0',
				// 	authMode: '03',
				// 	appMode: '9',
				// 	patId: this.userInfo.patId,
				// }
				let query = {
					openId: this.userId
				}
				console.log(query)
				// 先去查询当前患者是否有健康卡，如果有，则直接显示，如果没有，则去新建
				healthCardList(query).then(res => {
					console.log(res)
					if (res) {
						res.map(item => {
							item.name = item.patName
							item.sex - item.patSex
							item.idCard = item.certId;
							item.cardNo = item.patId
							item.patId = item.patId
						})
					}
					this.healthCardList = res
				})
			},
			selectUser(val, i) {
				if (this.userInfo.patId == val.patId) {
					console.log("不能对自己进行切换")
					return;
				}
				this.show = true;
				this.patId = val.patId;
			},
			handleSure() {
				this.changeUser(this.patId).then(data => {
						this.init()
					}).catch(e => {})
					.finally(() => {
						this.show = false;
					})
			},
			toAddHealthCardPage() {
				uni.navigateTo({
					url: '/pages/Login/addHealthCard'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-title {
		height: 30px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 15px;
		color: #333333;
		line-height: 30px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.add-card {
		padding: 12rpx 20rpx;
		border-radius: 16rpx;
		height: 240rpx;
		font-size: 28rpx;
		margin: 20rpx 0;
		border: 1px dashed rgb(118, 165, 249);
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;

		.card {
			width: 100rpx;
			height: 50rpx;
		}
	}

	.userInfo {
		background-image: url($mk-base+"/static/images/health-card/healthCard.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 16rpx;
		height: 200px;
		margin-bottom: 16rpx;
		position: relative;

		.user {
			position: absolute;
			top: 100px;
			left: 20px;
		}

		.card {
			position: absolute;
			right: 9px;
			top: 70px;
		}

		.card-center {
			position: absolute;
			width: 17px;
			height: 17px;
			right: 50px;
			top: 110px;
		}

		.btn-qr {
			width: 70px;
			height: 20px;
			position: absolute;
			bottom: 10px;
			right: 5px;

			.btn {
				background: linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%);
				border-radius: 16rpx;
				text-align: center;
				line-height: 20px;
				padding: 2px 5px;
			}

			.default {
				background: gray;
			}
		}
	}
</style>